<template>
	<view>



		<view class="person-info">
			<!-- 头部header -->
			<view class="header">
				<uni-nav-bar :statusBar="true" leftIcon="arrowleft" fixed="true" title="人员信息" @clickLeft="clickLeft"></uni-nav-bar>
			</view>

			<!--页面内容-->
			<view class="p-content member-info-wrap">
				<view class="staff-main-info">
					<view class="staff-info-container">
						<view class="staff-avatar-container">
							<img class="images" :src="imgHeaderUrl + personalData.avatar" v-if="personalData.avatar">
							<!-- <img class="images" src="../../../assets/images/sun_dining/common/no_photo.jpg" v-else> -->
						</view>
						<view class="staff-info">
							<view class="form-item-wrap-custom">
								<view class="form-item-item">
									<text class="form-label form-name">{{personalData.userName}}</text>
									<text class="common-status" v-if="personalData.status != null || personalData.status != ''" :class="oonJobStatus[personalData.status]">
										<text class="common-status-text">
											{{onJobName[personalData.status]}}
										</text>
									</text>
								</view>
								<view class="form-item-item" v-if="personalData.teperatureTime">
									<text>{{personalData.teperatureTime}}</text>
									<text>打卡</text>
								</view>
								<view class="form-item-item" v-if="personalData.teperatureStatus === 0 || personalData.teperatureStatus === 1">
									<view class="base-temperature" :class="{'abnormal-temperature': personalData.teperatureStatus === 0}">
										<text>{{personalData.bodyTeperature}}</text><text>°C</text>
									</view>
									<view class="base-text abnormal-temperature" v-if="personalData.teperatureStatus === 0">
										<view>体温异常</view>
										<view>体温异常人员 请立即安排休假，不得上岗工作！</view>
									</view>
									<view class="base-normal-text" v-else>体温正常</view>
								</view>
							</view>
						</view>
						<view class="staff-info">
							<view class="form-item-wrap">
								<text class="form-label">性别</text>
								<text class="form-label-text">{{personalData.sex}}</text>
							</view>
							<view class="form-item-wrap">
								<text class="form-label">工号</text>
								<text class="form-label-text">{{personalData.employeeNumber }}</text>
							</view>
							<view class="form-item-wrap">
								<text class="form-label">职务</text>
								<text class="form-label-text">{{personalData.postName}}</text>
							</view>
							<view class="form-item-wrap">
								<text class="form-label">手机</text>
								<text class="form-label-text">{{personalData.phone}}</text>
							</view>
							<view class="form-item-wrap">
								<text class="form-label">邮箱</text>
								<text class="form-label-text">{{personalData.email}}</text>
							</view>
							<view class="form-item-wrap">
								<text class="form-label">所属食堂</text>
								<text class="form-label-text" v-if="personalData.deptList && personalData.deptList.length > 0">
									<p v-for="item in personalData.deptList" :key="item.departmentId">{{item.departmentName}}</p>
								</text>
							</view>
							<view class="form-item-wrap">
								<text class="form-label">所属承包商</text>
								<text class="form-label-text">{{personalData.businessName}}</text>
							</view>
						</view>
						<view class="health-info">
							<view class="form-item-wrap">
								<text class="form-label">健康证信息</text>
							</view>
							<view>
								<text class="form-label">健康证号码</text>
								<text class="form-label-text">{{personalData.healthCeretNo }}</text>
							</view>
							<view>
								<text class="form-label">有效期至</text>
								<text class="form-label-text">{{personalData.endDate }}</text>
							</view>
							<view class="health-card-wrap" v-if="personalData.fileId" @click="toCheck">
								<view class="health-card-img">
									<!-- <image v-lazy="imgHeaderUrl + personalData.fileId"> -->
									<img :src="healthUrl" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				departmentId: '',
				orgId: '',
				userId: '',
				imgHeaderUrl: uni.getStorageSync('imgServerHost') + ':' + uni.getStorageSync('imgServerPort') + '/img/',
				personalData: {},
				contractorId: '',
				// healthShow: false, // 查看健康证图片 控制
				// popupVisible: false, // 健康证查看大图 控制
				healthUrl: '', // 健康证查看大图 url
				oonJobStatus: ['expired', 'due-expired', 'normal'],
				onJobName: ['已到期', '即将到期', '正常']
			}
		},
		onLoad(value) {
			this.orgId = value.orgId
			this.userId = value.userId
			this.contractorId = value.contractorId
			this.departmentId = value.departmentId
			this.initPage()
		},
		methods: {
			/**
			 * @description: 返回上一页
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			clickLeft() {
				uni.navigateBack()
			},
			getPersonalFunc() {
				let params = {
					departmentId: this.departmentId,
					userId: this.userId,
					contractorId: this.contractorId
				}
				this.$request.getOnPostPersonalInfo(params).then(res => {
					const data = res
					this.personalData = data
					this.healthUrl = this.imgHeaderUrl + this.personalData.fileId
					console.log(this.healthUrl)
				})
			},
			initPage() {
				if (!this.userId) {
					window.history.go(-1)
					return
				}
				this.getPersonalFunc()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.member-info-wrap {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		background-color: #fff;
		overflow-x: auto;

		.staff-main-info {
			.staff-info-container {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				padding: 0 10rpx;
				box-sizing: border-box;

				.staff-avatar-container {
					margin-top: 130rpx;
					align-self: center;
					width: 200rpx;


					.images {
						width: 100%;
						object-fit: contain;
					}
				}

				.staff-info {
					// .border-1px-b-half();

					.form-item-wrap {
						box-sizing: border-box;
						display: flex;
						flex-flow: row wrap;
					}

					.form-item-wrap-custom {
						.form-item-item {
							box-sizing: border-box;
							display: flex;
							flex-flow: row nowrap;
							align-items: center;
							padding: 5px 0px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							/*健康证状态*/
							.common-status {
								width: 80rpx;
								height: 40rpx;
								line-height: 20rpx;
								display: flex;
								;

								overflow: hidden;
								text-align: center;
								justify-content: center;
								align-items: center;
								/*transform: scale(0.5);*/
								/*transform-origin: 100% 100%;*/
								font-size: 24rpx;
								color: #fff;
								border-radius: 5px;

								.common-status-text {
									display: table-cell;
									vertical-align: middle;
								}
							}

							.normal {
								background-color: #46D795;
							}

							.expired {
								background: #FF5A59;
							}

							.due-expired {
								background: #FC9C1E;
							}

							.base-temperature {
								font-size: 2.4rem;
								color: #44D696;
								padding-right: 10px;
							}

							.abnormal-temperature {
								color: #FF5959;
							}

							.base-text {
								font-size: 1rem;
							}

							.base-normal-text {
								font-size: 1rem;
								align-self: flex-end;
							}
						}
					}

				}

				.staff-info,
				.health-info {
					box-sizing: border-box;
					width: 100%;
					align-self: flex-start;
					padding: 1rem 2rem 1.4rem 1.9rem;
					text-align: left;
					color: #C1C1C1;
					font-size: 24rpx;
					border-top: 1px solid #CCCCCC;

					/*line-height: 2rem;*/
					.form-label {
						flex: 0 0 200rpx;
						display: inline-block;
						vertical-align: top;
						margin-right: 10px;
						width: 10rem;
						color: #000000;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.form-label-span {
						flex: 1;
					}

					.form-name {
						font-size: 30rpx;
					}

					.form-item-wrap {
						margin: 4px 0px;
					}

					.health-card-wrap {
						box-sizing: border-box;
						display: flex;
						flex-flow: row wrap;
						justify-content: flex-start;
						margin: 10px auto;

						.health-card-img {
							width: 100%;
							height: auto;

							img {
								width: 100%;
								height: auto;
								object-fit: fill;
							}

							img[lazy="loading"] {
								opacity: .1;
								object-fit: scale-down;
							}

							img[lazy="loaded"] {
								opacity: 1;
								transition: opacity .5s;
							}
						}
					}
				}
			}
		}
	}
</style>
